<template>
	<el-container>
		<Header></Header>
		<el-main style="padding-top: unset">
			<!--登陆提示-->
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
				<el-menu-item index="1">进行中</el-menu-item>
				<el-menu-item index="2">未支付</el-menu-item>
				<el-menu-item index="3">已支付</el-menu-item>
				<el-menu-item index="4">已完成</el-menu-item>
			</el-menu>
			
			<!--	循环遍历订单-->
			<el-card class="box-card" style="font-size: small">
				<div slot="header" class="clearfix">
					<span>订单编号:{{123123123}}</span>
					<el-button v-if="status==='1'" style="float: right; padding: 3px 0" type="warning" >订单详情</el-button>
					<el-button v-if="status==='2'" style="float: right; padding: 3px 0" type="primary" >去支付</el-button>
					<el-button v-if="status==='3'" style="float: right; padding: 3px 0" type="danger" >{{'12.00¥'}}</el-button>
					<el-button v-if="status==='4'" style="float: right; padding: 3px 0" type="danger" >{{'12.00¥'}}</el-button>
				</div>
				<div>
					<el-row>
						<el-col :span="6" style="color: #999fa2">
							<span>车牌号码:</span>
						</el-col>
						<el-col :span="6">
							<span>{{'陕A23453'}}</span>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="6" style="color: #999fa2">
							<span>泊位编号:</span>
						</el-col>
						<el-col :span="18">
							<span>{{'A-1231'}}</span>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="6" style="color: #999fa2">
							<span>停车路段:</span>
						</el-col>
						<el-col :span="18">
							<span>{{'天安一路'}}</span>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="6" style="color: #999fa2">
							<span>驶入时间:</span>
						</el-col>
						<el-col :span="18">
							<span>{{'2022-09-12 12：41'}}</span>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="6" style="color: #999fa2">
							<span>停车时长:</span>
						</el-col>
						<el-col :span="12">
							<span>{{'1小时12分钟'}}</span>
						</el-col>
					</el-row>
				</div>
			</el-card>
		
		</el-main>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	
	
	</el-container>
</template>

<script>
	import Footer from "@/components/Footer";
	import Header from "@/components/Header";
	
	export default {
		name: 'Order',
		components: {Header, Footer},
		data() {
			return {
				//默认选择
				activeIndex: '1',
				//选择状态
				status:'1',
			}
		},
		methods: {
			handleSelect(index) {
				console.log(index)
				this.status=index;
				console.log(this.status)
			}
		}
	}
</script>

<style scoped>
	.el-container {
		width: 400px;
		height: 600px;
		border: 1px solid black;
		margin: auto;
		background-color: #ffffff;
	}
	
	.el-card {
		/*width: 100%;*/
	}
</style>